<template>
	<div class="AD-template">
		<div class="header">
			<div class="header-item">
			<span>站点名称/ID</span>	
		<el-input
  placeholder="请输入站点名称/ID"
  size="mini"
  v-model="searchQuery.id_name"
  clearable>
</el-input>
</div>
<div class="header-item select-item">
  <span>渠道</span>
<!-- <el-select v-model="searchQuery.channel_id" placeholder="请选择媒体"   size="mini" clearable>
    <el-option
      v-for="item in callback_media_options"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select> -->
      <el-cascader
         size="mini"
         placeholder="渠道名称"
         v-model="searchQuery.channel_id"
        :options="callback_media_options1"
        :props="{ expandTrigger: 'hover' , label:'title',value:'id' }"
         clearable
      >
     </el-cascader>
</div>
<div class="header-item select-item">
	<span>回传方案</span>
  <el-select v-model="searchQuery.callback_wechat" placeholder="加微回传方案"   size="mini" clearable>
    <el-option
      v-for="item in callback_wechat_options"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
</div>
<div class="header-item select-item">
	<span>接量方案</span>
  <el-select v-model="searchQuery.project_id" placeholder="接量方案"   size="mini" clearable>
    <el-option
      v-for="item in projList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</div>
<div class="search-button">
	<el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
	<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
 </div>
	</div>
    <div class="add-button">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="showDialog(null)">新增站点</el-button>
    </div>
    <el-table
    :data="tableData"
    v-loading="loading"
    style="width: 95%;margin: 20px auto 0 ;">
    <el-table-column
      prop="id"
      label="ID"
      fixed
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="站点名称"
      >
    </el-table-column>
    <el-table-column
      prop="channel_title"
      label="渠道"
      >
      <template slot-scope="scope">
                  <span>{{scope.row.level2_channel_title+'/'+ scope.row.level3_channel_title}}</span>
              </template>
    </el-table-column>
    <el-table-column
      prop="site_page.name"
      label="模版名称"
      >
    </el-table-column>
    <el-table-column
      prop="callback_wechat_name"
      label="加微回传方案"
     >
    </el-table-column>
    <el-table-column
      prop="strid"
      label="strId"
     >
    </el-table-column>
    <el-table-column
      prop="cctid"
      label="cctId"
     >
    </el-table-column>
    <el-table-column
      prop="bepid"
      label="bepId"
     >
    </el-table-column>
    <el-table-column
      prop="project_name"
      label="接量方案"
     >
    </el-table-column>
    <el-table-column
      label="操作"
      width="180"
      fixed="right"
      >
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="copUrl(scope.row)">复制URL</el-button>
        <el-button size="small" type="text" @click="viewUrl(scope.row)">查看URL</el-button>
        <el-button type="text" size="small" @click="showDialog(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
	<pagination 
	 class="footer-page"
   v-show="total>0"
      :total="total"
      :page.sync="searchQuery.page"
      :limit.sync="searchQuery.pageSize"
      @pagination="getSiteList"
	/>
    <el-dialog :title="dialogTitle" :visible.sync="addFlag" append-to-body width="600px" @close="closeAddDio"  destroy-on-close>
        <addSite :upDatedItem="upDatedItemChange" @pass="refresh"></addSite>
</el-dialog>
<el-dialog :title="viewUlrTitle" :visible.sync="viewFlag" append-to-body >
       <div>{{viewUlrTxt}}</div>
</el-dialog>
</div>
</template>
<script>
import addSite from './addSite'
import { getList,getProject } from '@/api/site.js';
import { getOptionList,getMediaList,getOptionListCs } from "@/api/order";
export default {
	data() {
		return {
            loading:true,
            callback_media_options1:[],
            upDatedItemChange:null,
            viewFlag:false,
            viewUlrTxt:'',
            viewUlrTitle:'',
            addFlag:false,
            dialogTitle:'新增站点',
            callback_media_options:[],
            callback_wechat_options:[],
            projList:[],
            saveChanelID:'',
            tableData: [],
		      	searchQuery:{
				      id_name:'',
              channel_id:'',
              callback_wechat:'',
              project_id:'',
              page: 1,
              pageSize: 20
			    },
          total:0
		}
	},
    components:{
        addSite
    },
    methods:{
      refresh(flag){
        this.addFlag=false
        if(flag){
        setTimeout(() => {
          this.getSiteList()
        }, 500);
      }
      },
      closeAddDio(){
        this.dialogTitle="新增站点"
      },
      viewUrl(item){
        if(!item.site_page){
          this.$message({
          message: '暂无地址或无效地址',
          type: 'error'
        });
          return
        }
        this.viewFlag=true
        this.viewUlrTxt=item.site_page.host+'customization?'+`siteid=${item.id}`+`&strid=${item.strid?item.strid:''}`+`&cctid=${item.cctid?item.cctid:''}`+`&bepid=${item.bepid?item.bepid:''}`
        window.open(this.viewUlrTxt)
        this.viewUlrTitle=item.name
      },
      copUrl(item){
        if(!item.site_page){
          this.$message({
          message:'暂无地址或无效地址,复制失败',
          type: 'error'
        });
          return
        }
        this.$copyText(item.site_page.host+'customization?'+`siteid=${item.id}`+`&strid=${item.strid?item.strid:''}`+`&cctid=${item.cctid?item.cctid:''}`+`&bepid=${item.bepid?item.bepid:''}`).then(
          res=>{
          this.$message({
          message: '复制成功',
          type: 'success'
        });
        },
        res=>{
          this.$message({
          message: '复制失败',
          type: 'error'
        });
        },
      )
      },
      search(){
        this.searchQuery.page=1
        this.saveChanelID=this.searchQuery.channel_id[1]
        this.getSiteList()
      },
      reset(){
        this.searchQuery={
              id_name:'',
              channel_id:'',
              callback_wechat:'',
              project_id:'',
              page: 1,
              pageSize: 20
			    },
          this.saveChanelID=''
          this.getSiteList()
      },
        showDialog(item){
          if(item){
            this.upDatedItemChange= JSON.parse(JSON.stringify(item))
            this.dialogTitle='站点ID : '+item.id
          }
          else{
            this.upDatedItemChange=null
          }
            this.addFlag=true  
        },
        getSiteList(){
          this.loading=true
          getList({...this.searchQuery,channel_id:this.saveChanelID}).then(res=>{
            res.data.data.forEach(el => {
              el.callback_wechat_name=this.callback_wechat_options.find(ele=>ele.id==el.callback_wechat).title
              el.project_name=this.projList.find(ele=>ele.id==el.project_id).name
            });
            this.tableData=res.data.data
            this.total=res.data.total
            this.loading=false
          })
        }
    },
    async created() {
      await getOptionListCs().then(res=>{
        this.callback_media_options1=res.data
      })
      await getMediaList().then(res=>{
        this.callback_wechat_options=res.data
      })
      await getProject().then(res=>{
      this.projList=res.data
     })
      await getOptionList({
        type:1
      }).then(res=>{
        this.callback_media_options=res.data
      })
      await this.getSiteList()
    },
}
</script>
<style lang="scss" scoped>
	.AD-template{
	 margin-top: 20px;
	 margin-left: 40px;
	 padding-bottom: 25px;
		.header{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.header-item{
				display: flex ;
				justify-content: space-between;
				align-items: center;
				span{
					text-align: right;
   					 font-size: 14px;
					 min-width: 140px;
   				 color: #606266;
    			line-height: 40px;
    			padding: 0 12px 0 0;
    			-webkit-box-sizing: border-box;
    				box-sizing: border-box;
				font-weight: 700;
				}
			}
            .select-item{
                width: 270px;
            }
			.search-button{
				margin-left: 40px;
				display: flex;
				align-items: center;
			}
		}
        .add-button{
                margin-left: 40px;
                margin-top: 20px;
            }
		.footer-page{
			margin-right: 100px;
			margin-bottom: 25px;
		}
	}
</style>